import Taro from '@tarojs/taro';
import {Image, View, Text} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import sxIcon from "../../../asset/images/sx_icon.png";
import './myCoupon.scss';
import none from "../../../asset/images/none.png";

const topName = ['全部', '失效'];

class MyCoupon extends Taro.Component {
    config = {
        navigationBarTitleText: '我的优惠券',
        navigationBarBackgroundColor: '#ffffff'
    };

    state = {
        couponData: [],
        sxData: [], //失效列表
        typeIx: 0, //0全部 1失效
    };

    componentDidMount() {
        this.init();
    }

    //获取优惠券
    init = () => {
        const params = {
            url: '/wx/coupon/listCoupons',
            data:{}
        };
        request(params).then(res => {
            Taro.stopPullDownRefresh(); //停止当前页面下拉刷新
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        const sxData = [];
                        res.data.forEach((item) => {
                            if (item.expire == 'Y') {
                                sxData.push(item);
                            }
                        });
                        this.setState({
                            couponData: res.data,
                            sxData,
                        })
                    }
                }
            }
        })
    };

    //切换
    setTypeIx = (ix) => {
        this.setState({
            typeIx: ix
        })
    };

    render() {
        const {typeIx, couponData, sxData} = this.state;
        return (
            <View className="myPage">
                <View className="take-wrap-top">
                    {topName.map((item, index) => (
                        <View className={`take-top-item ${typeIx == index? 'take-top-item-active' : ''}`} key={index} onClick={this.setTypeIx.bind(this, index)}>
                            <View className="text">{item}</View>
                            {typeIx == index &&(
                                <View className="text-active"></View>
                            )}
                        </View>
                    ))}
                </View>
                <View className="take-content-wrap">
                    {typeIx == 0 && couponData && couponData.map((item, index) => (
                        <View className="coupon-item" key={index}>
                            <View className="coupon-item-text">
                                <View className="coupon-money-wrap">
                                    <View className="money flex-l">
                                        <View>{item.favourableCharge}</View>
                                        <View className="dw-money">元</View>
                                    </View>
                                    <View>满{item.minCharge}可用</View>
                                </View>
                                <View className="coupon-number-wrap">
                                    <View className="number">{item.clientName}</View>
                                    <View>有效期：{item.effectTime}~{item.expireTime}</View>
                                </View>
                            </View>
                            {item.expire == 'Y' && (
                                <Image className="coupon-btn" src={sxIcon}></Image>
                            )}
                        </View>
                    ))}
                    {typeIx == 0 && couponData && couponData.length == 0 &&(
                        <View className="none" style="margin-top: 160px;">
                            <Image src={none}/>
                            <View>暂无</View>
                        </View>
                    )}
                    {typeIx == 1 && sxData && sxData.map((item, index) => (
                        <View className="coupon-item" key={index}>
                            <View className="coupon-item-text">
                                <View className="coupon-money-wrap">
                                    <View className="money flex-l">
                                        <View>{item.favourableCharge}</View>
                                        <View className="dw-money">元</View>
                                    </View>
                                    <View>满{item.minCharge}可用</View>
                                </View>
                                <View className="coupon-number-wrap">
                                    <View className="number">{item.clientName}</View>
                                    <View>有效期：{item.effectTime}~{item.expireTime}</View>
                                </View>
                            </View>
                            <Image className="coupon-btn" src={sxIcon}></Image>
                        </View>
                    ))}
                    {typeIx == 1 && sxData && sxData.length == 0 &&(
                        <View className="none" style="margin-top: 160px;">
                            <Image src={none}/>
                            <View>暂无</View>
                        </View>
                    )}
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



